<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>当前的n值是：<span v-text="n"></span></h2>
    <!-- 定义一个v-big指令放大n的值-->
    <h2>放大10倍后的n值是：<span v-big2="n"></span></h2>
    <!--    <h2>放大10倍后的n值是：<span v-big-number="n"></span></h2>-->
    <button @click="n++">点我n+1</button>
    <hr>
    <!-- v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点-->
    <input type="text" v-fbind2:value="n"/>
</div>
<script>
    Vue.config.productionTip = false;
    // 全局指令
    Vue.directive('fbind2', {
        // 指令与元素成功绑定时调用
        bind(element, binding) {
            element.value = binding.value * 10;
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
            // 插入页面时获取焦点
            element.focus();
        },
        // 指令所在的模板被重新解析时
        update(element, binding) {
            element.value = binding.value;
        }
    });
    Vue.directive('big2', (element, binding) => {
        element.innerHTML = binding.value * 10;
        console.log(this)
    });
    new Vue({
        el: "#root",
        data: {
            n: 1,
        },
        // 指令相关的元素中this指向window
        directives: {
            // big函数何时被调用：1. 指令与元素成功绑定时(bind) 2. 指定所在的模板被重新解析时(update)
            big(element, binding) {
                element.innerHTML = binding.value * 10;
            },
            // 'big-number'(element, binding) {
            //     element.innerHTML = binding.value * 10;
            // },
            // fbind: {
            //     // 指令与元素成功绑定时调用
            //     bind(element, binding) {
            //         element.value = binding.value * 10;
            //     },
            //     // 指令所在元素被插入页面时
            //     inserted(element, binding) {
            //         // 插入页面时获取焦点
            //         element.focus();
            //     },
            //     // 指令所在的模板被重新解析时
            //     update(element, binding) {
            //         element.value = binding.value;
            //     }
            // }
        }
    });
</script>
</body>
</html>